<template>

  <div style="padding-bottom: 2%">

    <a-comment v-for="comment in content" :key="comment.commentId">
      <a-avatar
          style="border-radius: 0"
          slot="avatar"
          src="/user.svg"
      />
      <a slot="author"
         style="color: #6d757a;    font-size: 12px; font-weight: bold;line-height: 18px;padding-bottom: 4px;padding-right: 10px;word-wrap: break-word;">
        {{ comment.commentator }}</a>
      <span v-if="comment.email" slot="author">邮箱:{{ comment.email }}  </span>
      <span v-if="comment.websiteUrl" slot="author">主页：{{ comment.websiteUrl }}  </span>
      <p slot="content">
        {{ comment.commentBody }}
      </p>
      <p>
        <a-tooltip slot="datetime">
          <a-tooltip placement="left" :title="comment.createTime" :get-popup-container="getPopupContainer">
            <span style="padding-right: 2%;">{{
                comment.createTime_fast
              }}</span>
          </a-tooltip>

        </a-tooltip>
        <!--        <span key="comment-basic-like">
                  <a-tooltip title="Like">
                    <a-icon type="like" :theme="action === 'liked' ? 'filled' : 'outlined'" @click="like"/>
                  </a-tooltip>
                  <span style="padding-left: '8px';cursor: 'auto'">
                    {{ likes }}
                  </span>
                </span>
                <span key="comment-basic-dislike">
                  <a-tooltip title="Dislike">
                    <a-icon
                      type="dislike"
                      :theme="action === 'disliked' ? 'filled' : 'outlined'"
                      @click="dislike"
                    />
                  </a-tooltip>
                  <span style="padding-left: '8px';cursor: 'auto'">
                    {{ dislikes }}
                  </span>
                </span>-->
        <a key="comment-basic-reply-to" @click="toggleReply(comment)">回复</a>

        <!--        <a-popconfirm title="确定删除吗？" ok-text="确定" cancel-text="取消" @confirm="del(comment)">
                  <a style="padding-left: 1%">删除</a>
                </a-popconfirm>-->


        <reply
            v-if="comment.isShowReply"
            @parentFun="parentFun"
            :content="comment"
            :commentator="comment.commentator"></reply>
      </p>

    </a-comment>
    <span class="font-size-14" v-show="lookBoolean" v-if="isShowTotal">共{{ total }}条回复，<a @click="look(lookBoolean)">{{
        lookText
      }}</a></span>
    <a-divider style="margin: 10px 0"/>
  </div>

</template>
<script>
import reply from "@/components/comment/reply";
import blogComment from "@/components/comment/blogComment";
import {blogCommentDelete, blogCommentPage} from '@/api'
import {getTimer} from '@/utils/util'

export default {
  components: {
    reply,
    blogComment
  },
  data() {
    return {
      likes: 0,
      dislikes: 0,
      action: null,
      isShowReply: false,
      comments: [],
      total: 0,
      isShowTotal: false,
      lookBoolean: true,
      lookText: '点击查看'
    }
  },
  mounted() {
    this.getCommentPage(1)
  },
  props: [
    'content',
    'total'
  ],
  methods: {
    like() {
      this.likes = 1
      this.dislikes = 0
      this.action = 'like'
    },
    dislike() {
      this.likes = 0
      this.dislikes = 1
      this.action = 'dislike'
    },
    toggleReply(e) {
      const nowStatu = e.isShowReply
      e.isShowReply = !nowStatu
    },
    look(lookBoolean) {
      if (lookBoolean) {
        // this.lookText = '点击收起'
        this.lookBoolean = !this.lookBoolean
        this.$emit("toggleIsShowChildPage",null)
        //this.getCommentPage(this.total)

      } else {
        // this.lookText = '点击查看'
        // this.lookBoolean = !this.lookBoolean
        // this.getCommentPage(1)
      }
    },
    getCommentPage(pageSize) {
      /*      blogCommentPage({pageNo: 1, pageSize: pageSize, parentId: this.content.parentId}).then((res) => {
              for (let i = 0; i < res.data.rows.length; i++) {
                res.data.rows[i].createTime_fast = getTimer(res.data.rows[i].createTime)
              }
              this.comments = res.data.rows
              this.total = res.data.totalRows
              if (this.total > 1) {
                this.isShowTotal = true
              }
              if (pageSize > 1) {
                this.isShowTotal = true
                this.lookText = '点击收起'
              }
              this.comments = this.comments.map(item => {
                this.$set(item, 'isShowReply', false)
                return item
              })
            })*/

      for (let i = 0; i < this.content.length; i++) {
        this.content[i].createTime_fast = getTimer(this.content[i].createTime)
      }

      if (this.total > 2) {
        this.isShowTotal = true
      }
      /*      if (pageSize > 1) {
              this.isShowTotal = true
              this.lookText = '点击收起'
            }*/
      this.content = this.content.map(item => {
        this.$set(item, 'isShowReply', false)
        return item
      })
    },
    /*del(comment) {
      blogCommentDelete(comment).then((res) => {
        if (res.code === 200 & res.success === true) {
          this.$message.success('删除成功！')
          this.parentFun()
        }
      })
    },*/
    parentFun() {
      this.$emit('parentFun')
    }

  }
}
</script>
<style scoped>
.font-size-14 {
  font-size: 14px;
}

.ant-comment-avatar img {
  border-radius: 0;
  width: 26px;
  height: 26px;
}
</style>